<!DOCTYPE html>
<html>
	<head>
		<title>我的游记</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/userTravels.css" />
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/plugins/jquery-form/jquery.form.js"></script>
		<script>
			$(function () {
			    //方法的抽取  分页查询
				function query() {
				    //第一页的数据
                    //发送异步请求获取用户游记列表
                    $.get("/users/"+user.id+"/travels",{currentPage:currentPage},function (data) {
                        //每一次查询完将数据保存到数组中,并且合并数据
                        dataList = $.merge(dataList,data.list);
                        //渲染数据,要符合jrender的格式
                        $(".travels").renderValues({list:dataList},{
                            //value就是render-value渲染的值
                            setHref:function (item,value) {
								var href = $(item).data("href"); //得到href
								$(item).attr("href",href + value);//手动拼接跳转的url
                            }
						});
                        //第一页数据,,,每次查询完之后页面加一
                        currentPage +=1;
                        //将第一查询的总页数封装成变量
                        totalPage = data.pages;
                    })
                }

			    //从共享数据中得到当前用户的id
				var user = JSON.parse(sessionStorage.getItem("user"));
				//分页查询需要拼接的临时变量
				var currentPage =1;
				//解决上一1页时数据丢失的问题
				var dataList = [];
				//总页数变量
				var totalPage = 1;
				//执行函数 ,第一次发送请求, currentPage= 1,默认是五条数据
				query();



				//屏幕滚动事件, 相当于下一页,如果currentPage >totalPaget .就是currentPage==totalPage.一直循环出来数据
				$(window).scroll(function () {
                    //触发翻页的时机.  屏幕高度+滚动高度>=数据的高度的时候
					if ($(window).height()+$(document).scrollTop()>=$(document).height()) {
                        //解决翻页底部问题,一直发送请求,如果当前页小于总页数的时候
                        if (currentPage <= totalPage) {
                            query();
                        } else {
                            //已经到最后一页
                            $(document).dialog({
                                type: "notice",
                                infoText: "到底了........",
                                autoClose: 1000,
                                position: "bottom" //在底部显示
                            })
                        }
                    }
                })


            })
		</script>
	</head>

	<body>
	<div class="search-head">
		<div class="row nav-search">
			<div class="col">
				<a href="profiles.html">
					<span><i class="fa fa-chevron-left"></i></span>
				</a>
			</div>
			<div class="col">
				<span>我的游记</span>
			</div>
			<div class="col"></div>
		</div>
	</div>


	<div class="container travels">
		<dl class="list" render-loop="list">
			<dd>
				<!--使用jrender循环中动态拼接id-->
			<a data-href="/mine/editTravels.html?id=" render-fun="setHref" render-key="list.id">
				<img render-src="list.coverUrl">
				<h6  render-html="list.title" class="title"> 骨灰级成都吃货地图</h6>
				<p>最近更新时间 <span render-html="list.lastUpdateTime">2018-07-13 12:46:27</span>
					<span class="span-right">
							  <i class="fa fa-heart"></i><span>0</span>收藏
						  <i class="fa fa-thumbs-o-up"></i><span>0</span>点赞</span>
				</p>
			</a>
			</dd>
		</dl>
	</div>

	</body>
</html>
